/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {TextInput, StyleSheet} from 'react-native';
import { List, Accordion, Icon  } from 'antd-mobile-rn';
import { SearchBar } from 'react-native-elements'


// project
import {
    CAround, CBetween, Center, Column, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';

import Licon from '../../../library/comp/project/icon';


/******************************************************************************************
 * Component
 ******************************************************************************************/

class AccordionTitle extends Component {
    constructor(props){
        super(props)
    }

    render(){
        return(
            <CRow df h='92' x='left' y='center'>
                {/*  bb='1 f0f0f0'  */}
                <CRow df h='92' x='left' y='center'>
                    {/* <Image df source={this.props.image || require('../../../assets/u1908.png')} w='24' h='24' mr='10'></Image> */}
                    <CIcon color="#00CC66" width="20" height="20" icon={ Licon["help"] }></CIcon>
                    <CText color='#5e5e5e' size="30" ml="30">{this.props.text}</CText>
                </CRow>
            </CRow>
        )
    }
}

/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class Help extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        // this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            helpList:[
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
            ]
        };
    }

    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
		// SplashScreen.hide();

		// HttpTemp.get({
        //     url: '/CPage/help/list.php',
        //     data:{},
		// 	suCess: (res)=> {
		// 		console.log('成功');
        //         // console.log(res);
        //         this.setState({helpList:res.data})
        //         console.log('this.state.helpList',this.state.helpList)
		// 	}
		// });
	}


    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 
     */
    onChange = (key) => {
        console.log(key);
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render() {
        const LItem = List.Item;
        return(
            <CPage>

                <CContent bg='#efeff4' mt='96'>
                    {/* 搜索 star */}
                    <CRow pa='16 20' ma='16 20' df bg='#fff' ra='10' h='60' x='center' y='center'>
                        {/* <Image df source={require('../../../assets/u1844.png')} w='14' h='14' mr='6'></Image> */}
                        <CHand f='1'>
                            <TextInput placeholder='搜索' placeholderTextColor='#bfbfbf' multiline = {true} underlineColorAndroid='transparent' style={{height:30,padding:0,flex:1}} />
                        </CHand>
                    </CRow>
                    {/* 搜索 star */}
                    
                    {/* 问题列表 star */}
                    <Accordion style={{borderWidth:0,backgroundColor:'#fff'}} onChange={this.onChange}>

                        {this.state.helpList.map( item =>{
                            return (
                                // 循环一级类目
                                <Accordion.Panel header={<AccordionTitle text={item.set_name} />}>
                                    <List>
                                    {item.item.map( ques => {
                                        // 循环问题
                                        return(
                                            <LItem><CText style={styles.text} size="30">{ques.set_name}</CText></LItem>
                                        )
                                    })}
                                    </List>
                                </Accordion.Panel>
                            )
                        })}

                    </Accordion>
                    {/* 问题列表 end */}

                    {/* 留言按钮 star */}
                    <CRow bg='#fff' pa='40 20' x='center' y='center' pt='70'>

                        <CHand bg='#f8f8f8' py='20' ba='2 #e4e4e4' f='1'>
                            <CItemX x='center' y='center' f='1'>
                                <CIcon color="#5e5e5e" width="20" height="20" icon={ Licon["person-center"] }></CIcon>
                                <CText color='#5e5e5e' size='34'>在线留言</CText>
                            </CItemX>
                        </CHand>
                        
                    </CRow>
                    {/* 留言按钮 star */}

                </CContent>

                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>常见问题</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

            </CPage>
        )
    }
}


const styles = StyleSheet.create ({
        listItem:{
        color:'#5e5e5e',
        fontSize:14,
        fontWeight:'normal'
    }
})